<template>
     <div class="header">
      <div class="title"></div>
        <div class="header-right-box">
        <div class="header-menu-box">
            <p @click="$router.push('/home')" style="cursor: pointer">主页</p>
            <p @click="$router.push('/userInfo')" :style="active=='user'?'cursor: pointer; font-weight: bold; color: #0081cd':'cursor: pointer;'">
            用户信息
            </p>
            <p
            @click="$router.push('/helpcenter')"
            :style="active=='help'?'cursor: pointer; font-weight: bold; color: #0081cd':'cursor: pointer;'"
            >
            服务指南
            </p>
            <p @click="$router.push('/Opinions')" :style="active=='options'?'cursor: pointer; font-weight: bold; color: #0081cd':'cursor: pointer;'">
            意见建议
            </p>
        </div>
        <div class="header-search-box">
            <el-input style="border-radius:0!important" placeholder="请输入搜索关键字" v-model="keyWords"></el-input>
            <el-button class="el_buggssf" style="border-radius:0!important" type="primary" icon="el-icon-search" @click="search"></el-button>
        </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['active'],
        data(){
            return{
              keyWords:'',
              bgc: "全部",
              username:'',
              userpwd:'',
              userId: localStorage.getItem("USER_ID"),
              interfaceName: "antu.newportal-zjx.provider.portal.PortalProvider",
            }
        },
        methods: {
          search(){
            if(this.keyWords==''){
              this.$message.error('请输入搜索条件！')
              return false
            }
            this.$.ajax({
              url: this.$API.ajaxPath,
              type: "post",
              data: {
                interfaceName: this.interfaceName,
                methodName: "getLoginUrLInfo",
                args: [this.userId],
              },
              dataType: "json",
              success: (response) => {
                if (response.status == "0") {
                  response.result = JSON.parse(response.result);
                  this.username = response.result.loginName;
                  this.userpwd = response.result.pwd;
                  window.open(
                    "http://172.18.2.38:8099/qwjs/#/?uid=" +
                       this.username +
                      "&pwd=" +
                      this.userpwd +
                      "&text=" +
                      this.keyWords +
                      "&jump=3" +
                      "&classify=" +
                      this.bgc
                  );
                }
              },
              error: (xhr) => {
                console.log(xhr);
              },
            });
          },
        }
    }
</script>

<style lang="less" scoped>
 .home_light .header {
    position: relative;
    width: 100%;
    height: 94px;
    padding: 0 200px;
    background-color: #fff;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.09714285714285708);
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      width: 430px;
      height: 30px;
      float: left;
      background: url(../assets/image/title_00.png) no-repeat;
      background-size: 100% 100%;
    }
    .theme {
      float: right;
      line-height: 94px;
      cursor: pointer;
      i {
        display: inline-block;
        width: 17px;
        height: 17px;
      }
      .light {
        border: 1px solid #d9d9d9;
        background-color: #fff;
      }
      .dark {
        border: 1px solid #cccccc;
        background-color: #000;
      }
    }
    .header-right-box {
        display: flex;
        align-items: center;
        font-size: 14px;
        .header-menu-box{
            display: flex;
            width: 250px;
            margin-right: 10px;
            justify-content: space-between;
        }
        .header-search-box{
            display: flex;
            .el-button--primary{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 70px;
            }
        }
    }
  }
   .home_dark .header {
    width: 100%;
    height: 94px;
    padding: 0 200px!important;
    background-color: #181b2d;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05714285714285708);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      width: 500px;
      height: 36px;
      float: left;
      background: url("../assets/image/title_01.png") no-repeat;
      background-size: 100% 100%;
    }
    .theme {
      float: right;
      line-height: 30px;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      .out_icon {
        display: inline-block;
        background: url("../assets/image/out@2x.png") no-repeat;
        background-size: 100% 100%;
        width: 24px;
        height: 24px;
        margin-right: 5px !important;
        position: relative;
        top: 6px
      }
    }
        .header-right-box {
        display: flex;
        align-items: center;
        font-size: 14px;
        .header-menu-box{
            display: flex;
            width: 250px;
            margin-right: 10px;
            justify-content: space-between;
            p{
                color: #FFF;
            }
            
        }
        .header-search-box{
            display: flex;
            .el-button--primary{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 70px;
            }
        }
    }
  }
  @media (max-width:1440px) and (min-width:1280px) {
    .home_dark .header .title{
      width: 300px;
      height: 20px;
    }
    .home_light .header .title{
      width: 300px;
      height: 20px;
    }
  }
</style>